<template>
    <div class="home">
        <h3>Mutation测试</h3>
        <div>
            <p>{{ a }}</p>
            <!-- 
                提交方式
                $store.commit('name', val)

                当使用对象风格的提交方式，整个对象都作为载荷(payload)传给 mutation 函数，因此 handler 保持不  => 
                $store.commit({
                    type:"name",
                    argN:argVal
                })
            
             -->

            <button @click="$store.commit('addA', 10)">addA</button>
            <button @click="addA(10)">addA</button>
            <hr>
            <p>{{ b }}</p>
            <button @click="$store.commit('addB', 2)">addB</button>
            <button @click="addB(2)">addB</button>
            <hr>

            <!-- 如果需要同时传递多个参数 => 先整合为对象 再将对象作为第二参数传入 -->
            <button @click="$store.commit('addBoth',{m:1,n:2})">addBoth</button>
            <button @click="$store.commit({type:'addBoth',m:1,n:2})">addBoth</button>
            <button @click="addBoth({m:1,n:2})">addBoth</button>
            <hr>

        </div>

    </div>
</template>

<script>
// @ is an alias to /src
import { mapState,mapMutations } from "vuex";

export default {
    name: 'OtherView',
    data() {
        return {
            count: 10,
        }
    },
    methods:{
        // 对原本的 this.$store.commit("xxx",arg) 进行了二次方式  
        // 先调用 this.add()  => 触发 this.$store.commit("addA",arg);

        // 自己写,麻烦
        // addA:function(arg){
        //     this.$store.commit("addA",arg);
        // },
        // addB:function(arg){
        //     this.$store.commit("addB",arg);
        // },
        // addBoth:function(arg){
        //     this.$store.commit("addBoth",arg);
        // }

        // ...mapMutations({
        //     addA:"addA",
        //     addB:"addB",
        //     addBoth:"addBoth",
        // }),

        ...mapMutations(["addA","addB","addBoth"])


    },
    computed: {
        ...mapState(["a","b"]),
    },
    mounted() {
        console.log(this);
        console.log(this.$store);
        console.log(this.$store.state);
    }
}
</script>
